<template>
  <!--  我的待办  -->

<div>
<!--  <el-page-header @back="goBack" title="审批" content="我的待办" ></el-page-header>-->
<div v-if="XiaoHiuZiZuJian">
  <el-table
      :data="DaiBanData"
      style="width: 100%">
    <el-table-column
        prop="fd_id"
        label="编号"
        >
    </el-table-column>
    <el-table-column
        prop="fname"
        label="审批名称"
        >
    </el-table-column>
    <el-table-column
        prop="user_realname"
        label="申请人">
    </el-table-column>

    <el-table-column
        fixed="right"
        label="操作">
    <template slot-scope="scope">
      <el-button @click="getXiangQing(scope.row)" type="text" size="small">查看详情</el-button>
      <el-button @click="TongGuo(scope.row)" type="text" size="small">通过</el-button>
      <el-button @click="BoHiu(scope.row)" type="text" size="small">驳回</el-button>
    </template>
    </el-table-column>

  </el-table>
</div>

<!--  审批详情 对话框-->
  <div v-if="!XiaoHiuZiZuJian">
<!--  <el-dialog title="审批详情" :visible.sync="FlowDetails" @close="closeXiangQing" >-->

<!--      <GetDetails :DetailsData="DetailsData"></GetDetails>-->

<!--  </el-dialog>-->
    <CaseDetails :case-id="caseId" @back="back"></CaseDetails>
  </div>


</div>

</template>

<script>

// 引入查看详情组件
// import GetDetails from "./GetDetails";
import CaseDetails from "../../wyq/CaseDetails";

export default {
  name: "myThing",
  // components:{GetDetails},
  components:{CaseDetails},
  data(){
    return{
      caseId:"",
        DaiBanData:[],
      FlowDetails:false, // 控制审批详情对话框
      DetailsData:{},
      XiaoHiuZiZuJian:true //销毁查看详情子组件
    }
  },
  created() {
    this.getDaiBan()
  },
  methods:{
    getDaiBan(){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const uid = JSON.parse(localStorage["user"])[0].id//当前登陆者
      // 查询我的待办
      this.$http.get(`mythings/${uid}`)
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.DaiBanData=res.data.data
      })
      .catch()

    },
    getXiangQing(rowData){// 查看详情
      console.log(rowData)
      this.caseId = rowData.data_column
      // console.log(rowData)
      this.XiaoHiuZiZuJian=false //显示子组件
      // this.DetailsData=rowData;
      // console.log(this.DetailsData)
      // this.FlowDetails=true //打开对话框
    },
    back(){
      this.XiaoHiuZiZuJian=true
      this.getDaiBan()
    },
    TongGuo(rowData){
      // console.log(rowData)
      //流程通过 修改
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$http.put("mythings",{rowData},{params:{"OperationType":"TongGuo"}})
      .then( () => {
        setTimeout(() => {
          loading.close();
        });
        this.$message({
          message: '申请已通过!',
          type: 'success'
        });
        this.getDaiBan()
      })
      .catch()

    },
    BoHiu(rowData){//审批驳回
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$http.put("mythings",{rowData},{params:{"OperationType":"bohiu"}})
      .then(() => {
        setTimeout(() => {
          loading.close();
        });
        this.$message.error('申请已驳回!');
        this.getDaiBan()
      })
      .catch()
    },
    closeXiangQing(){//关闭审批详情对话框触发
      //销毁子组件
      this.XiaoHiuZiZuJian=false
    },
    goBack(){this.$router.go(-1);} //返回上一个页面
  }
}
</script>

<style scoped>

</style>